<template>
    <div class="wrapper tocash">
        <mt-header :fixed="false" title="提现" rightName="记录" rightPath="/account/wallet/record" :rightPathQuery="rightPathQuery" mtClass="no-bg" />
        <div class="blank-9"></div>
        <div class="list">
            <div style="padding:10px 0;">地址</div>
            <mt-field placeholder="请输入以太坊系列地址" type="textarea" disableClear rows="2" v-model="inputValueAddress"></mt-field>
        </div>
        <div class="blank-9"></div>
        <div class="list">
            <div class="cash-num">提现数量</div>
            <!-- <mt-field type="number" placeholder="请输入提现数量,不得少于100" class="input-num" disableClear v-model="inputValueMoney"></mt-field> -->
            <input class="cash-num-input" type="number" onkeyup="this.value=this.value.replace(/\D/g,'')" :placeholder="`最少提现数量${fee+1}`" onafterpaste="this.value=this.value.replace(/\D/g,'')" v-model="inputValueMoney">
            <mt-cell :title="`可用：${$route.query.availableDlb}`">
                <span></span>
            </mt-cell>
            <mt-cell title="手续费">
                <span>{{fee}}</span>
            </mt-cell>
            <mt-cell title="实际到账" class="no-border">
                <span>{{ actualMoney }}</span>
            </mt-cell>
        </div>
        <div class="blank-9"></div>
        <div class="default-btn">
            <mt-button type="primary" size="large" :disabled="($route.query.availableDlb>1&&inputValueMoney<=num&&inputValueMoney>fee&&(num>=fee+1)&&isVA)?false:true" @click.native="toInputPwd">提现</mt-button>
        </div>
    </div>
</template>

<script>
import mtHeader from "@/components/Header"
import { Toast } from 'mint-ui';
import { PostExtract, ValidateAddress } from '@/api/api'
import { validateInteger, validateAddress } from '@/utils/validate'
export default {
    data() {
        return {
            inputValueAddress:'',
            inputValueMoney : '',
            actualMoney:0,
            num:"",
            isVA:false,
            fee:0,
            rightPathQuery:{
                type : '1'
            }
        }
    },
    components:{
        mtHeader
    },
    mounted(){
        this.fee = Number(this.$route.query.extractCharge);
        this.num = Number(this.$route.query.availableDlb);
    },
    methods: {
        toInputPwd(){
            // 正则验证地址格式正确
            if(validateAddress(this.inputValueAddress)){
                // 后台验证地址真是存在
                ValidateAddress({
                    address:this.inputValueAddress
                }).then(res => {
                    if( res.code == 200 ){
                        this.$router.push({
                            path : '/account/wallet/inputpwd',
                            query:{ 
                                extractAddress : this.inputValueAddress,
                                extractCount : this.inputValueMoney,
                                mobile: this.$route.query.mobile
                            }
                        })
                    }else{
                        Toast({
                            message: res.msg,
                            iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                        })
                    }
                })
            }else{
                Toast({
                    message: res.msg
                });
            }
        },
        toRecord(){
            this.$router.push({
                path : '/account/wallet/record',
                query:{ 
                    type : '1'
                }
            })
        }
    },
    watch:{
        inputValueMoney(curVal,oldVal){
            if( curVal < this.fee+1  || curVal > this.num){
                this.actualMoney = 0;
            }else{
                this.actualMoney = curVal - this.fee;
            }
        },
        inputValueAddress(curVal,oldVal){
            if( validateAddress(curVal) ){
                this.isVA = true;
            }else{
                this.isVA = false; 
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    .list{
        color:#666666;
        .cash-num{
            color: #666666;
            margin-top: 18px;
        }
        .cash-num-input{
            padding-bottom: 12px;
            margin-top: 29px;
            height:50px;
            font-size: 14px;
            color:#050505;
            border-bottom: 1px solid #f2f3f9;
        }
    }
    .tips{
        margin-top:10px;
        color:#ec3333;
        font-size:12px;
    }
}  
</style>